<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/swiper.esm.bundle.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.esm.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="./css/swiper.css"/>
		<link rel="stylesheet" type="text/css" href="./css/swiper.min.css"/>
	</head>
	<body>
	    <!-- 基本结构 -->
	    <div class="swiper-container box">
	        <div class="swiper-wrapper">
	          <div class="swiper-slide">Slide 1</div>
	          <div class="swiper-slide">Slide 2</div>
	          <div class="swiper-slide">Slide 3</div>
	        </div>
	        <!-- Add Arrows -->
	        <div class="swiper-button-next"></div>
	        <div class="swiper-button-prev"></div>
	    </div>
	    <script>
	        //初始化轮播功能
	        new Swiper(".box",{
	            navigation: {
	                nextEl: '.swiper-button-next',
	                prevEl: '.swiper-button-prev',
	            },
	        })
	    </script>
	</body>
</html>
